<template>
  <div class="top">
    <addMenu v-if="updataKey" @updaTeTable="updaTeTableFn" :iconOptions="options" />
  </div>
  <div>
    <el-table :data="tableData" border stripe table-layout="fixed" :key="isUpdate" style="width: 100%; margin-bottom: 20px" row-key="id" default-expand-all>
      <el-table-column prop="name" label="菜单名称" width="300" />
      <el-table-column prop="path" label="菜单路径" />
      <el-table-column prop="pagePath" label="页面路径" />
      <el-table-column prop="icon" label="菜单图标" width="80">
        <template #default="scope">
          <div class="icon" v-if="scope.row.icon">
            <el-icon>
              <component :is="scope.row.icon"></component>
            </el-icon>
          </div>
        </template>
      </el-table-column>>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <div class="botton">
            <template v-if="scope.row.children">
              <addSonMenu @updaTeTable="updaTeTableFn" :pid="scope.row.id"></addSonMenu>
            </template>
            <editMenu @updaTeTable="updaTeTableFn" :baseFrom="scope.row" v-if="updataKey" :id="scope.row.id" :iconOptions="options" :isIconSelect="scope.row.children"></editMenu>
            <template v-if="scope.row.children">
              <el-popconfirm :title="popconfirmTitle" @show="showPopconfirm(scope.row.id)" @confirm="DeleteParentMenuFn(scope.row.id)" :key="scope.row.id">
                <template #reference>
                  <el-button type="danger" round size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
            <el-button v-else type="danger" round size="small" @click="DeleteChildrenMenuFn(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script  setup>
import addMenu from './cpn/addMenu.vue'
import addSonMenu from './cpn/addSonMenu.vue'
import editMenu from './cpn/editMenu.vue'
import { getMenuList, getIcon, DeleteMenu } from '@/api/menu.js'
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'

let tableData = reactive([])
let isUpdate = ref(false)
onMounted(() => {
  getIconFn()
  getMenuListFN()
})
const getMenuListFN = () => {
  getMenuList().then(res => {
    tableData = res.data
    isUpdate.value = !isUpdate.value
  })
}
const updataKey = ref(false)
let options = reactive([])
const getIconFn = () => {
  getIcon().then(res => {
    options = res.data
    updataKey.value = true
  })
}
const updaTeTableFn = () => {
  getMenuListFN()
}
const { proxy } = getCurrentInstance()
const DeleteMenuFn = id => {
  DeleteMenu(id).then(res => {
    if (res.data) {
      updaTeTableFn()
      proxy.$Message({
        type: 'success',
        message: res.msg
      })
    } else {
      proxy.$Message.error(res.msg)
    }
  })
}
const popconfirmTitle = ref('请先删除子菜单！')
const showPopconfirm = id => {
  const ParentMenuItem = tableData.find(item => item.id === id)
  if (ParentMenuItem.children?.length === 0) {
    popconfirmTitle.value = '确认删除？'
    return false
  } else {
    popconfirmTitle.value = '请先删除子菜单！'
    return true
  }
}
const DeleteParentMenuFn = id => {
  const isExis = showPopconfirm(id)
  if (!isExis) {
    DeleteMenuFn(id)
  }
}
const DeleteChildrenMenuFn = id => {
  DeleteMenuFn(id)
}
</script>
<style lang="less" scoped>
.top {
  padding: 10px;
}
.el-table /deep/ .cell {
  text-align: center;
}
/deep/ .el-table__indent {
  padding-left: 50px !important;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
